<template>
    <div>
        <input type="checkbox" :checked="completed" @change="toggleCompletion">
        <span :class="{ completed: completed }">{{ title }}</span>
        <button @click="removeTodo">删除</button>
    </div>
</template>

<script>
export default {
    
    props: {
        title: String,
        completed: Boolean
    },
    methods:{
        toggleCompletion(){
            this.$emit('update:completed',!this.completed);
        },
        removeTodo(){
            this.$emit('removeTodo');
        }
    }
}
</script>

<style scoped>
.completed{
    text-decoration: line-through;
}
</style>